<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>400来电详情</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        select {
            background: transparent;
            border: none;
            outline: none;
        }

        .model-picker-input {
            opacity: 0 !important;
            top: -9999px;
            left: -9999px;
            position: absolute;
        }

        .model-picker-span {
            position: relative;
            display: block;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            color: #ccc;
            cursor: pointer;
        }

        .model-picker-span > .placeholder {
            color: #aaa;
        }

        .model-picker-span > .arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 10px;
            margin-top: -3px;
            height: 5px;
            background: url(../images/drop-arrow.png) -10px -25px no-repeat;
        }

        .model-picker-span.focus,
        .model-picker-span.open {
            border-bottom-color: #46A4FF;
        }

        .model-picker-span.open > .arrow {
            background-position: -10px -10px;
        }

        .model-picker-span > .title > span {
            color: #333;
            padding: 5px;
            border-radius: 3px;
        }

        .model-picker-span > .title > span:hover {
            background-color: #f1f8ff;
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select-wrap {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .model-select-tab {
            border-bottom: 1px solid #ccc;
            background: #f5f5f5;
            /*font-size: 13px;*/
        }

        .model-select-tab > a {
            display: inline-block;
            padding: 4px 20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            color: #4D4D4D;
            text-align: center;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            /*font-size: 14px;*/
            margin-bottom: -1px;
        }

        .model-select-tab > a.active {
            background: #fff;
            border-bottom: 1px solid #fff;
            color: #46A4FF;
        }

        .model-select-tab > a:first-child {
            border-left: none;
        }

        .model-select-tab > a:last-child.active {
            border-right: 1px solid #ccc;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select dt {
            position: absolute;
            width: 2.5em;
            font-weight: 500;
            text-align: right;
            line-height: 2;
        }

        .model-select dd {
            margin-left: 0;
            line-height: 2;
        }

        .model-select.province dd {
            margin-left: 3em;
        }

        .model-select a {
            display: inline-block;
            padding: 0 10px;
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
            margin-right: 2px;
            color: #333;
            cursor: pointer;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .table-detail input[type=text] {
            padding-left: 0;

        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        select {
            color: rgb(42, 140, 236) !important;
            background: #fff;
        }

        .table-detail td {
            /*font-size: 16px;*/
            line-height: 35px;
            height: 35px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            background: #F5F5F5;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            text-align: left !important;
            padding-left: 4px !important;
            /*font-size: 16px !important;*/
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            /*font-size: 16px;*/
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .td-module td {
            color: black;
            font-weight: bold;
            background: yellow;
        }

        .table-detail {
            border-left: 1px solid #cbcbcb;
            border-top: 1px solid #cbcbcb;
        }

        .table-detail .td-module {
            background-color: yellow;
        }

        span.lineOne {
            line-height: 20px;
            height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .table-detail td.td-value2 {
            padding: 1px !important;
            text-align: left !important;
        }

        .td-value2 input {
            box-shadow: inset 1px 1px 4px #333;
            height: 100% !important;
            padding-left: 4px !important;
        }

        .span-a-btn {
            position: absolute;
            right: 10px;
        }

        .table-detail td.td-value {
            text-align: left !important;
            padding-left: 4px !important;
            /*font-size: 16px !important;*/
        }

        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 10px;
            height: 10px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .moreListData {
            position: absolute;
            top: 30px;
            z-index: 111;
            display: none;
        }

        .moreListData .item {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .moreListData .item span {
            margin-right: 5px;
        }

        .ui_main {
            vertical-align: top;
        }

        .table-detail input[type=text], .table-detail input[type=number], .table-detail input[type=tel], .table-detail select {
            margin-left: 0px;
            margin-right: 0px;
        }

        .user {
            height: 30px;
            line-height: 30px;
            max-height: 30px;
            float: left;
            text-align: left;
            min-width: 32px;
            padding-left: 1px;
            overflow: hidden;
            cursor: pointer;
        }

        .user:hover {
            background-color: #cfd4d1;
        }

        .userbox .select.user {
            color: #fff;
            background-color: #045B9E;
        }

        .span-btn {
            position: absolute;
            left: 10px;
            margin-top: 4px;
            cursor: pointer;
        }

        .auditorName {
            text-align: center;
        }


        .progressobj {
            height: 20px;
        }

        .progressobj .delfile {
            float: left;
            margin-left: 10px;
        }

        .select {
            color: #fff;
            background-color: #045B9E;
        }

        td .sp-value {
            display: inline-block;
            padding-left: 6px;
            word-wrap: break-word;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: black;
            font-weight: normal !important;
        }

        .table-detail-payee:nth-child(even) td.td-title {
            background-color: white;
        }

        .printDiv {
            display: none;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            display: block;
            padding: 0 4px;
            height: 22px;
            line-height: 22px;
            padding-left: 15px;
            margin: 0 auto;
            width: 70px;
            margin-top: 6px;
            border-radius: 4px;
        }

        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }
        .span-a-btn {
            position: absolute;
            right: 10px;
        }

        .span-a-btn a {
            font-size: 12px;
        }

    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<section class="content" id="app" v-cloak style="padding: 0px;">
    <div class="div-td-content-more"><i></i></div>
    <div class="center" style="overflow:auto;overflow-x:hidden;">
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">来电类型</td>
            </tr>
            <tr>
                <td style="text-align:center;border-right-width:0px;width:100%;" colspan="4">
                    <span v-for="(item,index) in callTypeList">
                        <input type="radio" name="callType"  v-model="call.main.callType"
                               v-bind:value="item.value" :checked="item.isCheck" @change="changeInput(index)">
                        {{item.name}}
                    </span>
                </td>
            </tr>
            <tr class="td-module">
                <td colspan="4">客户信息</td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">来电人姓名</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <input type="text" v-if="pageType=='edit'" v-model="call.main.callerName" class="validators"
                           placeholder="请输入"/>
                    <span v-else style="padding-left: 4px;">{{call.main.callerName}}</span>
                </td>
                <td class="td-title" style="width: 25%;">来电号码</td>
                <td class="td-tanZongStyle" style="width: 25%;padding-left: 4px;">
                    <input type="text" v-if="pageType=='edit'" v-model="call.main.callerTel" class="validators"
                           placeholder="请输入"/>
                    <span v-else style="padding-left: 4px;">{{call.main.callerTel}}</span>
                </td>
            </tr>
            <template v-if="call.main.callType=='报修'||call.main.callType=='投诉'">
                <tr>
                    <td class="td-title" style="width: 25%;">实际购车人</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input id="customerName" type="text" v-if="pageType=='edit'" v-model="call.main.customerName"
                               class="validators" placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.customerName}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">实际购车人电话</td>
                    <td class="td-tanZongStyle" style="width: 25%;padding-left: 4px;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.customerTel" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.customerTel}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">客户所在地</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.customerLocation" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.customerLocation}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">来电人与购车人关系</td>
                    <td class=" td-tanZongStyle" style="width: 25%;">
                        <select v-if="pageType=='edit'" v-model="call.main.connection" class="validators">
                            <option selected value=""></option>
                            <option v-for="(item,i) in connectionList" v-bind:value="item.value">
                                {{item.name}}
                            </option>
                        </select>
                        <span v-else style="padding-left: 4px;">{{call.main.connection}}</span>
                    </td>
                </tr>
            </template>
            <template v-else>
                <tr>
                    <td class="td-title" style="width: 25%;">来电归属地</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.callerAttribution" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.callerAttribution}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">客户所在地</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.customerLocation" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.customerLocation}}</span>
                    </td>
                </tr>
            </template>

            <template v-if="call.main.callType=='报修'">
                <tr class="td-module">
                    <td colspan="4">报修信息
                        <template v-if="pageType=='edit'">
                            <button type="button" class="btn oaBtn btn-sm pull-right"
                                    style="height: 25px;margin-top:6px; position: absolute;right: 6px;" @click="selectDevice()">
                                选择设备
                            </button>
                        </template>
                        <template v-else>

                        </template>
                    </td>
                </tr>
            </template>
            <template v-else-if="call.main.callType=='投诉'">
                <tr class="td-module">
                    <td colspan="4">投诉信息</td>
                </tr>
            </template>
            <template v-else-if="call.main.callType=='咨询'">
                <tr class="td-module">
                    <td colspan="4">咨询信息</td>
                </tr>
            </template>
            <template v-else>
                <tr class="td-module">
                    <td colspan="4">询价信息</td>
                </tr>
            </template>

            <template v-if="call.main.callType=='报修'">
                <tr>
                    <td class="td-title" style="width: 25%;">品牌</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.brandName" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceBrand" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.deviceBrand}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">类型</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.deviceType" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceType" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.deviceType}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">型号</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.modelName" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceModel" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.deviceModel}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">序列号</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.serialNo" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceSerialNum" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.deviceSerialNum}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">交机日期</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.deliveryDate" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deliveryDate" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.deliveryDate}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">工作时长(小时)</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.workHours" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.workHours}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">质保状态</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <select v-model="call.main.warrantyStatus" v-if="pageType=='edit'" class="validators">
                            <option selected value=""></option>
                            <option v-for="(item,i) in warrantyStatusList" v-bind:value="item.value">
                                {{item.name}}
                            </option>
                        </select>
                        <span v-else style="padding-left: 4px;">{{call.main.warrantyStatus}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">是否停机</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <select v-model="call.main.workStatus" v-if="pageType=='edit'" class="validators">
                            <option selected value=""></option>
                            <option selected value="是">是</option>
                            <option selected value="否">否</option>
                        </select>
                        <span v-else style="padding-left: 4px;">{{call.main.workStatus}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">设备状态</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <select v-model="call.main.deviceStatus" v-if="pageType=='edit'" class="validators">
                            <option selected value=""></option>
                            <option v-for="(item,i) in deviceStatusList" v-bind:value="item.value">
                                {{item.name}}
                            </option>
                        </select>
                        <span v-else style="padding-left: 4px;">{{call.main.deviceStatus}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">付款方式</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.buyType" class="validators"
                               placeholder="请输入"/>
                        <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.payMethod" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.payMethod}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">施工所在地</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.workLocation" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.workLocation}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">保险公司</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.insuranceCompany" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.insuranceCompany}}</span>
                    </td>
                </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">报修类型</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.repairCategory" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option v-for="(item,i) in repairCategoryList" v-bind:value="item.value">
                                    {{item.name}}
                                </option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.repairCategory}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">预约维修时间</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.reserveRepairDate" class="validators"
                                   @focus="showDatePicker($event,'reserveRepairDate')" placeholder="请选择时间"/>
                            <span v-else style="padding-left: 4px;">{{call.main.reserveRepairDate}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">报修内容登记</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.callContent" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.callContent}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">备注</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.remark" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.remark}}</span>
                        </td>
                    </tr>
            </template>

            <template v-if="call.main.callType=='投诉'">
                <tr>
                    <td class="td-title" style="width: 25%;">投诉类别</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <select v-model="call.main.complaintCategory" v-if="pageType=='edit'" class="validators">
                            <option  value="设备问题">设备问题</option>
                            <option  value="人员问题">人员问题</option>
                            <option  value="其他">其他</option>
                        </select>
                        <span v-else style="padding-left: 4px;">{{call.main.complaintCategory}}</span>
                    </td>
                    <template v-if="call.main.complaintCategory =='设备问题'">
                        <td class="td-title" style="width: 50%;" colspan="2">
                            <template v-if="pageType=='edit'">
                                <button type="button" class="btn oaBtn btn-sm"
                                        @click="selectDevice()">选择设备

                                </button>
                            </template>
                            <template v-else>

                            </template>
                        </td>
                    </template>
                    <template v-else-if="call.main.complaintCategory =='人员问题'">
                        <td class="td-title" style="width: 25%;">被投诉人</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.beingComplaintPerson" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.beingComplaintPerson}}</span>
                        </td>
                    </template>
                    <template v-else>
                        <td class="td-title" style="width: 25%;"></td>
                        <td class="td-tanZongStyle" style="width: 25%;"></td>
                    </template>
                </tr>
                <template v-if="call.main.complaintCategory =='设备问题'">
                    <tr>
                        <td class="td-title" style="width: 25%;">品牌</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.brandName" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceBrand" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.deviceBrand}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">类型</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.deviceType" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceType" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.deviceType}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">型号</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.modelName" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceModel" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.deviceModel}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">序列号</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.serialNo" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deviceSerialNum" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.deviceSerialNum}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">交机日期</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd == '1'" v-model="other.deliveryDate" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd == '0'" v-model="call.main.deliveryDate" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.deliveryDate}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">工作时长(小时)</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.workHours" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.workHours}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">质保状态</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.warrantyStatus" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option v-for="(item,i) in warrantyStatusList" v-bind:value="item.value">
                                    {{item.name}}
                                </option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.warrantyStatus}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">是否停机</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.workStatus" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option selected value="是">是</option>
                                <option selected value="否">否</option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.workStatus}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">设备状态</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.deviceStatus" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option v-for="(item,i) in deviceStatusList" v-bind:value="item.value">
                                    {{item.name}}
                                </option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.deviceStatus}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">付款方式</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit' && isAdd=='1'" v-model="other.buyType" class="validators"
                                   placeholder="请输入"/>
                            <input type="text" v-else-if="pageType=='edit' && isAdd=='0'" v-model="call.main.payMethod" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.payMethod}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">施工所在地</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.workLocation" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.workLocation}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">保险公司</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.insuranceCompany" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.insuranceCompany}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">投诉内容</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.callContent" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.callContent}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">备注</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.remark" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.remark}}</span>
                        </td>
                    </tr>
                </template>
                <template v-else-if="call.main.complaintCategory =='人员问题'">
                    <tr>
                        <td class="td-title" style="width: 25%;">投诉详情</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.callContent" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.callContent}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">备注</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.remark" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.remark}}</span>
                        </td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td class="td-title" style="width: 25%;">投诉详情</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.callContent" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.callContent}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title" style="width: 25%;">备注</td>
                        <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.remark" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.remark}}</span>
                        </td>
                    </tr>
                </template>
            </template>

            <template v-else-if="call.main.callType == '咨询'||call.main.callType == '询价'">
                <template v-if="call.main.callType == '咨询'">
                    <tr>
                        <td class="td-title" style="width: 25%;">咨询类型</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.advisoryCategory" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option v-for="(item,i) in advisoryCategoryList" v-bind:value="item.value">
                                    {{item.name}}
                                </option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.advisoryCategory}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">品牌</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.advisoryBrand" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.advisoryBrand}}</span>
                        </td>
                    </tr>
                </template>
                <template v-if="call.main.callType == '询价'">
                    <tr>
                        <td class="td-title" style="width: 25%;">咨询类型</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <select v-model="call.main.inquiryCategory" v-if="pageType=='edit'" class="validators">
                                <option selected value=""></option>
                                <option selected value="购买整机">购买整机</option>
                                <option selected value="购买配件">购买配件</option>
                            </select>
                            <span v-else style="padding-left: 4px;">{{call.main.inquiryCategory}}</span>
                        </td>
                        <td class="td-title" style="width: 25%;">品牌</td>
                        <td class="td-tanZongStyle" style="width: 25%;">
                            <input type="text" v-if="pageType=='edit'" v-model="call.main.advisoryBrand" class="validators"
                                   placeholder="请输入"/>
                            <span v-else style="padding-left: 4px;">{{call.main.advisoryBrand}}</span>
                        </td>
                    </tr>
                </template>
                <tr>
                    <td class="td-title" style="width: 25%;">类型</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.advisoryType" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.advisoryType}}</span>
                    </td>
                    <td class="td-title" style="width: 25%;">型号</td>
                    <td class="td-tanZongStyle" style="width: 25%;">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.advisoryModel" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.advisoryModel}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">咨询详情</td>
                    <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.callContent" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.callContent}}</span>
                    </td>
                </tr>
                <tr>
                    <td class="td-title" style="width: 25%;">备注</td>
                    <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                        <input type="text" v-if="pageType=='edit'" v-model="call.main.remark" class="validators"
                               placeholder="请输入"/>
                        <span v-else style="padding-left: 4px;">{{call.main.remark}}</span>
                    </td>
                </tr>
            </template>

            <template v-else>

            </template>

            <tr class="td-module">
                <td colspan="4">受理信息</td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">来电时间</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <span style="padding-left: 4px;">{{call.main.callDate}}</span>
                </td>
                <td class="td-title" style="width: 25%;">登记人</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <span style="padding-left: 4px;">{{call.main.registerName}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">工单状态</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <select v-model="call.main.flag" v-if="pageType=='edit'" class="validators">
                        <option selected value=""></option>
                        <option v-for="(item,i) in flagList" v-bind:value="item.value">
                            {{item.name}}
                        </option>
                    </select>
                    <span v-else style="padding-left: 4px;">{{call.main.flag}}</span>
                </td>
                <td class="td-title" style="width: 25%;">受理公司</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <select v-model="call.main.acceptCompanyName" v-if="pageType=='edit'" class="validators" @change="selectCompany()">
                        <option selected value=""></option>
                        <option v-for="(item,i) in companyList" v-bind:value="item.name">
                            {{item.name}}
                        </option>
                    </select>
                    <span v-else style="padding-left: 4px;">{{call.main.acceptCompanyName}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">受理时间</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <input type="text" v-if="pageType=='edit'" v-model="call.main.acceptDate" class="validators"
                           @focus="showDatePicker($event,'acceptDate')" placeholder="请输入"/>
                    <span v-else style="padding-left: 4px;">{{call.main.acceptDate}}</span>
                </td>
                <td class="td-title" style="width: 25%;">受理人</td>
                <td class="td-tanZongStyle" style="width: 25%;">
                    <select v-if="pageType=='edit'" v-model="call.main.acceptPersonName" class="validators">
                        <option selected value=""></option>
                        <option v-for="(item,i) in acceptPersonList" v-bind:value="item.name">
                            {{item.name}}
                        </option>
                    </select>
                    <span v-else style="padding-left: 4px;">{{call.main.acceptPersonName}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">解决方案</td>
                <td class="td-tanZongStyle" style="width: 25%;" colspan="3">
                    <input type="text" v-if="pageType=='edit'" v-model="call.main.problemSolution" class="validators"
                           placeholder="请输入"/>
                    <span v-else style="padding-left: 4px;">{{call.main.problemSolution}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title" style="width:25%;">抄送人</td>
                <td colspan="3">
                    <div id="user" style="padding-left:6px;"
                         v-on:click.stop="inputFocus('txtCopier')">
                        <div v-for="(user,i) in call.copiers" class="user"
                             v-bind:class="{ select: copierSelectedIdx == i }"
                             v-on:click="selectUser(i,'copierSelectedIdx')">{{user.copierName}};
                        </div>
                        <input v-if="pageType=='edit'" class="pull-left copier" id="txtCopier"
                               style="width:100px"
                               type="text" @keyup.delete="deleteUser"/>
                    </div>
                </td>
                </td>
            </tr>
        </table>
        <div class="south no-print" style="height:50px;line-height:50px;text-align:center;">
            <template v-if="pageType == 'edit'">
                <input type="button" style="margin-left:20px;" value="保存"
                       class="btn oaBtn btn-sm"
                       @click="save">
            </template>
        </div>
    </div>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo,.lineF", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.track.main.provinceName = val;
                app.track.main.cityName = '';
                app.track.main.countyName = '';
                app.getCity(id);
                $(".model-select-content .brand").show();

            } else if ($(this).parents(".model-select").hasClass("brand")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=model]").addClass("active");
                $(".model-select").hide();
                app.track.main.cityName = val;
                app.track.main.countyName = '';
                app.getCounty(id);
                $(".model-select-content .model").show();

            } else {
                app.track.main.countyName = val;
                $(".model-picker-dropdown").hide();
                app.track.main.customerAddress = app.track.main.provinceName + app.track.main.cityName + app.track.main.countyName
                app.checkProp('customerAddress')
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
    $(function () {
        $("body").on("click", ".moreList", function (e) {
            var tableName = $(this).attr("data-table");
            var column = $(this).attr("data-column");
            var columnName = $(this).attr("data-columnName");
            var mainKey = $(this).attr("data-column");
            var mid = $(this).attr("data-mid");
            var type = $(this).attr("data-type");
            if ($(this).hasClass("jiaobiao3")) {
                $.dialog({
                    content: 'url:/page/logs/logs.html?tableName=' + tableName + '&column=' + column + '&columnName=' + columnName + "&mainKey=" + mainKey + "&mid=" + mid + '&type=' + type + '&id=' + app.track.main.id,
                    title: '修改日志',
                    width: 600,
                    height: 500,
                    max: false,
                    min: false,
                    lock: true
                });
            }
        });
        $("body").on("click", ".moreListData", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".moreListData").hide();
        });
    });
</script>
<script type="text/javascript">
    var api = frameElement.api;
    function refresh() {

    }
    var app = new Vue({
        el: '#app',
        data: {
            isCheck:true,
            id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
            pageType: $.wyui.page.urlParams.pageType,
            isAdd: $.wyui.page.urlParams.isAdd,
            currentUser: getCurrentUser(),
            copierSelectedIdx: -1,
            call:{
                main:{
                     id:'',
                     registerId:getCurrentUser().id,
                     registerName:getCurrentUser().name,
                     callDate:new Date().Format('yyyy-MM-dd hh:mm:ss'),
                     callType:'报修',
                     callerName:'',
                     callerTel:'',
                     callerAttribution:'',
                     customerId:'',
                     customerName:'',
                     customerTel:'',
                     customerLocation:'',
                     connection:'',
                     dealers:'',
                     repairCategory:'',
                     reserveRepairDate:'',
                     acceptPersonId:'',
                     acceptPersonName:'',
                     acceptCompanyId:'',
                     acceptCompanyName:'',
                     acceptDate:'',
                     acceptRemark:'',
                     advisoryCategory:'',
                     inquiryCategory:'',
                     advisoryBrand:'',
                     advisoryType:'',
                     advisoryModel:'',
                     problemSolution:'',
                     complaintCategory:'设备问题',
                     beingComplaintPerson:'',
                     callContent:'',
                     remark:'',
                     flag:'处理中',
                     deviceBrand:'',
                     deviceType:'',
                     deviceModel:'',
                     deviceSerialNum:'',
                     deliveryDate:'',
                     warrantyStatus:'',
                     workHours:'',
                     workStatus:'',
                     deviceStatus:'',
                     payMethod:'',
                     workLocation:'',
                     insuranceCompany:''
                },
                copiers: [],
                auditors: []
            },
            selectCom:'',
            companyList:[],
            acceptPerson:'',
            acceptPersonList:[], //公司的服务工程师
            callTypeList:[
                {value: '报修', name:'报修' ,isChecked: true},
                {value: '咨询', name:'咨询' ,isChecked: false},
                {value: '投诉', name:'投诉' ,isChecked: false},
                {value: '询价', name:'询价' ,isChecked: false}
            ],
            flagList:[
                {value: '处理中', name: '处理中'},
                {value: '已处理', name: '已处理'},
                {value: '作废', name: '作废'}
            ],
            warrantyStatusList:[
                {value: '保内', name: '保内'},
                {value: '保外', name: '保外'},
                {value: '延保', name: '延保'}
            ],
            deviceStatusList:[
                {value: '自销', name: '自销'},
                {value: '转入', name: '转入'}
            ],
            connectionList:[
                {value: '本人', name: '本人'},
                {value: '管理员', name: '管理员'},
                {value: '操作员', name: '操作员'},
                {value: '其他', name: '其他'}
            ],
            advisoryCategoryList:[
                {value: '整机业务', name: '整机业务'},
                {value: '二手机业务', name: '二手机业务'},
                {value: '配件业务', name: '配件业务'},
                {value: '回访', name: '回访'},
                {value: '其他', name: '其他'}
            ],
            repairCategoryList:[
                {value: '交机', name: '交机'},
                {value: '故障维修', name: '故障维修'},
                {value: '定检保养', name: '定检保养'},
                {value: '巡检', name: '巡检'},
                {value: '面访', name: '面访'},
                {value: '电访', name: '电访'},
                {value: '回访', name: '回访'},
                {value: '其他服务', name: '其他服务'}
            ],
            myCheckList: [],
            other:{
                brandName:'',
                deviceType:'',
                modelName:'',
                serialNo:'',
                deliveryDate:'',
                buyType:''
            }
        },
        methods: {
            selectCompany:function () {
                var that=this;
                if(that.call.main.acceptCompanyName != ''){
                    for(var i  =0; i < that.companyList.length; i++){
                        if(that.call.main.acceptCompanyName == that.companyList[i].name){
                            that.call.main.acceptCompanyName = that.companyList[i].name;
                            that.call.main.acceptCompanyId = that.companyList[i].id;
                        }
                    }
                }
                $.wyui.postMethod(urlConfig.call.getServicersList, {companyId:that.call.main.acceptCompanyId}, function (data) {
                    that.acceptPersonList = data;
                    console.log(that.acceptPersonList)
                })
            },
            changeInput:function(index){
                var that = this;
                for(var i = 0; i < that.callTypeList.length; i++){
                    if(i==index){
                        that.callTypeList[i].isCheck = true
                    }else{
                        that.callTypeList[i].isCheck = false
                    }
                }
            },
            test:function(){
                var that = this;
                for(var i = 0; i < that.callTypeList.length; i++){
                    if(that.callTypeList[i].isCheck){
                        console.log('被选中的值为:'+that.callTypeList[i].value)
                    }
                }
            },
            selectDevice:function () {
                var that = this;
                var tel = that.call.main.customerTel;
                if(tel != ''){
                    $.dialog({
                        content: 'url:/page/callService/customerDeviceList.html?pageType=edit' + "&tel=" + tel + "&day=" + new Date(),
                        title: '客户设备列表',
                        width: 600,
                        height: 300,
                        max: true,
                        min: true,
                        lock: true
                    });
                }else{
                    alert("实际购车人电话不能为空!")
                }
            },
            hiddenDivModel: function () {
                $("#countyIdel").hide();
            },
            goBack: function () {
                api.close();
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            selectUser: function (i, prop) {
                this.copierSelectedIdx = -1;
                this[prop] = i;
            },
            deleteUser: function (event) {
                if (event.keyCode == 46 || event.keyCode == 8 && event.target.value == "") {
                    if (this.copierSelectedIdx > -1) {
                        this.call.copiers.splice(this.copierSelectedIdx, 1);
                        this.copierSelectedIdx = -1;
                    } else {
                        this.copierSelectedIdx = this.call.copiers.length - 1;
                    }
                }
            },
            save: function () {
                var that = this;
                for(var i = 0; i < that.companyList.length; i++){
                    if(that.call.main.acceptCompanyName == that.companyList[i].name){
                        that.call.main.acceptCompanyName = that.companyList[i].name;
                        that.call.main.acceptCompanyId = that.companyList[i].id;
                    }
                }
                for(var i  =0; i < that.acceptPersonList.length; i++){
                    if(that.call.main.acceptPersonName == that.acceptPersonList[i].name){
                        that.call.main.acceptPersonName = that.acceptPersonList[i].name;
                        that.call.main.acceptPersonId = that.acceptPersonList[i].id;
                    }
                }
                that.call.main.deviceBrand = that.other.brandName;
                that.call.main.deviceType = that.other.deviceType;
                that.call.main.deviceModel = that.other.modelName;
                that.call.main.deviceSerialNum = that.other.serialNo;
                that.call.main.deliveryDate = that.other.deliveryDate;
                that.call.main.payMethod = that.other.buyType;
                $.wyui.postMethod(urlConfig.call.save, trimRN(that.call), function (data) {
                    alert('保存成功');
                        var pageId = top.getActivePageId();
                        var $iframe = top.findIframeByName("400来电记录");
//                        $iframe[0].contentWindow.app.getCallList();
//                        top.closeTabByPageId(pageId);
                        $iframe[0].contentWindow.refresh();
                        api.close();
                })
            },
            getCallById:function () {
                var that = this;
                $.wyui.postMethod(urlConfig.call.getCallById, {
                    id: that.id
                }, function (data) {
                    that.call= data;
                    if(that.isAdd == '0'){
                        $.wyui.postMethod(urlConfig.call.getServicersList, {companyId:that.call.main.acceptCompanyId}, function (data) {
                            that.acceptPersonList = data;
                            console.log(that.acceptPersonList)
                        })
                    }
                })
            },
            showDatePicker: function (e,type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        if(type=="acceptDate"){
                            that.call.main.acceptDate = dp.cal.getNewDateStr();
                        }
                        if(type=="reserveRepairDate"){
                            that.call.main.reserveRepairDate = dp.cal.getNewDateStr();
                        }
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            }
        },
        mounted: function () {
            var that = this;
            if (that.id) {
                this.getCallById();
            }
            $.wyui.postMethod(urlConfig.call.getCompanyList, {}, function (data) {
                that.companyList = data;
                console.log(that.companyList)
            })
        }
    });
    $(function () {
        $("#customerName").autoComplete({
            url: server.ip + urlConfig.contract.getNameAndTel,
            render: function (users, panel) {
                console.log("users=" + users);
                if (users) {
                    for (var i = 0; i < users.length; i++) {
                        $("<li></li>").data("autoComplete",
                            users[i]).html("<a>" + users[i].customerName + "&nbsp;&nbsp;&nbsp;" +
                            "(" + "&nbsp;" + users[i].customerTel + ") " + "</a>")
                            .appendTo(panel);
                    }
                }
            },
            selected: function (user) {
                app.call.main.customerId = user.customerId;
                app.call.main.customerName = user.customerName;
                app.call.main.customerTel = user.customerTel;
                app.call.main.customerLocation = user.buyerAddress;
                return false;
            },
            extraParams: {createUserId: getCurrentUser().id},
            height: 210,
            width: 300
        });
    });
</script>
<script>
    $('[contenteditable]').each(function () {
        // 干掉IE http之类地址自动加链接
        try {
            document.execCommand("AutoUrlDetect", false, false);
        } catch (e) {
        }

        $(this).on('paste', function (e) {
            e.preventDefault();
            var text = null;

            if (window.clipboardData && clipboardData.setData) {
                // IE
                text = window.clipboardData.getData('text');
            } else {
                text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
            }
            if (document.body.createTextRange) {
                if (document.selection) {
                    textRange = document.selection.createRange();
                } else if (window.getSelection) {
                    sel = window.getSelection();
                    var range = sel.getRangeAt(0);

                    // 创建临时元素，使得TextRange可以移动到正确的位置
                    var tempEl = document.createElement("span");
                    tempEl.innerHTML = "&#FEFF;";
                    range.deleteContents();
                    range.insertNode(tempEl);
                    textRange = document.body.createTextRange();
                    textRange.moveToElementText(tempEl);
                    tempEl.parentNode.removeChild(tempEl);
                }
                textRange.text = text;
                textRange.collapse(false);
                textRange.select();
            } else {
                // Chrome之类浏览器
                document.execCommand("insertText", false, text);
            }
        });
        // 去除Crtl+b/Ctrl+i/Ctrl+u等快捷键
        $(this).on('keydown', function (e) {
            // e.metaKey for mac
            if (e.ctrlKey || e.metaKey) {
                switch (e.keyCode) {
                    case 66: //ctrl+B or ctrl+b
                    case 98:
                    case 73: //ctrl+I or ctrl+i
                    case 105:
                    case 85: //ctrl+U or ctrl+u
                    case 117: {
                        e.preventDefault();
                        break;
                    }
                }
            }
        });
    });
</script>
<script>
    $(function () {
        initAutoComplete();
    });

    function initAutoComplete() {
        $(".auditorName,.copier").autoComplete({
            url: server.ip + urlConfig.system.user.getTop10ByNameUser,
            render: function (users, panel) {
                for (var i = 0; i < users.length; i++) {
                    $("<li></li>").data("autoComplete",
                        users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                if ($(this).hasClass("auditorName")) {
                    var idx = $(this).attr("idx");
                    app.call.auditors[idx].auditorId = user.id;
                    app.call.auditors[idx].auditorName = user.roleName + "-" + user.name;
                } else if ($(this).hasClass("copier")) {
                    var userIds = new Array();
//                    for (var i = 0; i < app.call.auditors.length; i++) {
//                        userIds.push(app.call.auditors[i].auditorId);
//                    }
                    for (var i = 0; i < app.call.copiers.length; i++) {
                        userIds.push(app.call.copiers[i].copierId);
                    }
                    if ($.inArray(user.id, userIds) == -1) {
                        app.call.copiers.push({copierId: user.id, copierName: user.name});
                    } else {
                        alert("抄送人不能重复输入");
                    }
                    $(this).val("");
                }
                return false;
            },
            height: 210,
            width: 300
        });
    }
</script>
</body>
</html>